<template>
  <div>
    <MyHeader background="#1d7bff"  title="购物车案例"></MyHeader>
    <div id="app">
      <MyGoods v-for="obj in list" :key="obj.id" :goodsObj="obj"></MyGoods>
    </div>
    <MyFooter @changeCheck="changeFn" :arr='list'></MyFooter>
  </div>
</template>
<script>
// 铺设数据
// 1.data里变量list去then里接收数据
// 2.上面循环使用MyGoods组件
// 3. 分别传入数据对象到MyGoods组件内
// 4. 在MyGoods组件内使用MyCount组件，父传子传入数据显示
import MyHeader from './components/MyHeader'
import MyGoods from './components/MyGoods'
import MyFooter from './components/MyFooter'
export default {
    components: {
      MyHeader,
      MyGoods,
      MyFooter
    },
     data () {
      return {
        list:[]
      }
    },
    created () {
      this.$axios({
        url:'/api/cart',

      }).then(res=>{
        // console.log(res)
        this.list = res.data.list
      })
    },
   methods: {
     changeFn(bool){
       this.list.forEach(obj => obj.goods_state = bool)
     }
   }
}
</script>
<style scoped>
#app {
  padding-top: 45px;
  padding-bottom: 50px;
}
</style>